<template>
  <div class="app-container">
    <div class="queryContent">
      <el-form :inline="true" ref="menu" :model="menu" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input v-model="menu.menuName" placeholder="菜单名称" clearable/>
        </el-form-item>

        <el-form-item label="菜单状态">
          <el-select v-model="menu.menuStatus" placeholder="菜单状态" clearable>
            <el-option
              v-for="item in menuStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>

    <div class="buttonContent">
      <el-form :inline="true" label-width="80px">
        <el-row>
          <el-col :span="21">
            <el-button type="primary" @click="addUser" icon="el-icon-plus">新增</el-button>
          </el-col>
          <el-col :span="3" style="text-align: right;">
            <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="onReset" icon="el-icon-refresh-right">重置</el-button>
          </el-col>

        </el-row>
      </el-form>

    </div>

    <div class="tableContent">
      <el-table :data="menuList" border style="width: 100%;" :header-cell-style="this.$customUi.grid.title"
                :cell-style="this.$customUi.grid.cell" :style="this.$customUi.grid.style"
                row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                default-expand-all>

        <el-table-column show-overflow-tooltip prop="menuName" label="菜单名称" min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="menuType" label="菜单类型" align="center" min-width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.menuType | menuTypeFilter">{{scope.row.menuType | menuType}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="icon" label="图标 " min-width="100px" align="center">
          <template slot-scope="scope">
            <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon"/>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="path" label="路由地址" min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="orderNum" label="排序" align="center"
                         min-width="100px"></el-table-column>

        <el-table-column show-overflow-tooltip prop="menuStatus" label="菜单状态" align="center" min-width="100px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.menuStatus | menuFilter">{{scope.row.menuStatus | menuStatus}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" sortable align="center" min-width="150px">
          <template slot-scope="scope">
            <el-button type="danger" plain>删除</el-button>
            <el-button type="success" plain @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  新增编辑界面  -->
    <menu_edit ref="menuEdit" @closeDialog="close_dialog"></menu_edit>
  </div>
</template>

<script>
  import api from '@/api/sysMenu'
  import menu_edit from './menu-edit'

  export default {
    name: 'Menu',
    components: { menu_edit },
    data() {
      return {
        menu: {
          menuName: '',
          menuStatus: ''
        },
        menuList: [],
        menuStatus: [
          { value: '0', label: '正常' },
          { value: '1', label: '停用' }
        ]
      }
    },
    filters: {
      menuFilter(status) {
        const statusMap = { 0: 'success', 1: 'danger' }
        return statusMap[status]
      },
      menuStatus(type) {
        const menuType = { 0: '正常', 1: '停用' }
        return menuType[type]
      },

      menuTypeFilter(status) {
        const menuMap = { 1: '', 2: 'success', 3: 'info' }
        return menuMap[status]
      },
      menuType(type) {
        const menuType = { 1: '目录', 2: '菜单', 3: '按钮' }
        return menuType[type]
      }

    },
    created() {
      this.onQuery()
    },
    methods: {
      // 查询
      onQuery() {
        var me = this
        api.getMenu(this.menu).then(response => {
          if (response.status === 200 && response.data != null) {
            me.menuList = response.data
          }
        })
      },
      // 重置
      onReset() {
        this.menu.menuName = ''
        this.menu.menuStatus = ''
        this.onQuery()
      },
      // 新增
      addUser() {
        this.$refs.menuEdit.open('add', '')
      },
      // 编辑
      edit(row) {
        this.$refs.menuEdit.open('edit', row.id)
      },
      // 关闭编辑dialog
      close_dialog() {
        this.onQuery()
      }
    }
  }
</script>

<style scoped>

</style>
